<template>
  <div class="bg" id="bg">
    <div class="content">
      <slot name="content"></slot>
    </div>
    <div class="title">
      <div class="titlecon">
        <slot name="titlecon"></slot>
      </div>
    </div>
    <div class="close">
      <slot name="close"></slot>
    </div>
    <div class="story">
      <p class="contenttitle" id="gushititle" v-on:click="gsshow">故 事</p>
      <div class="pro" id="gushi" v-show="gushishow">
        <div class="gushiicon1">
        </div>
        <div class="title1">
          <slot name="title1"></slot>
        </div>
        <div class="gushiicon2">
        </div>
        <div class="title2">
         <slot name="title2"></slot>
        </div>
        <div class="gushiicon3">
        </div>
        <div class="title3">
          <slot name="title3"></slot>
        </div>
        <div class="gushiicon4">
        </div>
        <div class="title4">
          <slot name="title4"></slot>
        </div>
      </div>
    </div>
    <div class="koucai">
      <p class="contenttitle" id="koucaititle" v-on:click="kcshow">口 才</p>
      <div class="pro" id="koucai" v-show="koucaishow">
        <div class="koucaiicon1">
        </div>
        <div class="title1">
          <slot name="koucaititle1"></slot>
        </div>
        <div class="koucaiicon2">
        </div>
        <div class="title2">
         <slot name="koucaititle2"></slot>
        </div>
        <div class="koucaiicon3">
        </div>
        <div class="title3">
          <slot name="koucaititle3"></slot>
        </div>
        <div class="koucaiicon4">
        </div>
        <div class="title4">
          <slot name="koucaititle4"></slot>
        </div>
      </div>
    </div>
    <div class="xinshang">
      <p class="contenttitle" id="xinshangtitle" v-on:click="xsshow">欣 赏</p>
      <div class="pro" id="xinshang" v-show="xinshangshow">
        <div class="xinshangicon1">
        </div>
        <div class="title1">
          <slot name="xinshangtitle1"></slot>
        </div>
        <div class="xinshangicon2">
        </div>
        <div class="title2">
          <slot name="xinshangtitle2"></slot>
        </div>
        <div class="xinshangicon3">
        </div>
        <div class="title3">
          <slot name="xinshangtitle3"></slot>
        </div>
      </div>
    </div>
    <div class="huaju">
      <p class="contenttitle" id="huajutitle" v-on:click="hjshow">话 剧</p>
      <div class="pro" id="huaju" v-show="huajushow">
        <div class="huajuicon1">
        </div>
        <div class="title1">
          <slot name="huajutitle1"></slot>
        </div>
        <div class="huajuicon2">
        </div>
        <div class="title2">
          <slot name="huajutitle2"></slot>
        </div>
        <div class="huajuicon3">
        </div>
        <div class="title3">
          <slot name="huajutitle3"></slot>
        </div>
      </div>
    </div>
    <div class="baohe">
      <p class="contenttitle" id="baohetitle" v-on:click="bhshow">宝 盒</p>
       <div class="pro" id="baohe" v-show="baoheshow"> 
        <div class="baoheicon1">
        </div>
        <div class="title1">
          <slot name="baohetitle1"></slot>
        </div>
        <div class="baoheicon2">
        </div>
        <div class="title2">
          <slot name="baohetitle2"></slot>
        </div>
        <div class="baoheicon3">
        </div>
        <div class="title3">
          <slot name="baohetitle3"></slot>
        </div>
        <div class="baoheicon4">
        </div>
        <div class="title4">
          <slot name="baohetitle4"></slot>
        </div>
        <div class="baoheicon5">
        </div>
        <div class="title5">
          <slot name="baohetitle5"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      gushishow: false,
      koucaishow: false,
      xinshangshow: false,
      huajushow: false,
      baoheshow: false
    }
  },
  mounted () {
    var links = document.querySelectorAll('a')
    Array.prototype.forEach.call(links, function (links) {
      links.addEventListener('click', function (evt) {
        evt.preventDefault()
        if (this.href.slice(0, 16) === 'http://127.0.0.1') {
          const BrowserWindow = require('electron').remote.BrowserWindow
          BrowserWindow.showDevTools = false
          let win = new BrowserWindow({
            width: 1280,
            height: 720,
            webPreferences: {
              nodeIntegration: false
            },
            show: false,
            backgroundColor: '#2e2c29'
          })
          win.setFullScreen(true)
          win.loadURL(this.href)
          win.once('ready-to-show', () => {
            win.show()
          })
        } else {
          console.log('======')
          window.location.href = this.href
        }
      })
    })
  },
  methods: {
    gsshow: function () {
      this.gushishow = true
      this.koucaishow = false
      this.xinshangshow = false
      this.huajushow = false
      this.baoheshow = false
    },
    kcshow: function () {
      this.gushishow = false
      this.koucaishow = true
      this.xinshangshow = false
      this.huajushow = false
      this.baoheshow = false
    },
    xsshow: function () {
      this.gushishow = false
      this.koucaishow = false
      this.xinshangshow = true
      this.huajushow = false
      this.baoheshow = false
    },
    hjshow: function () {
      this.gushishow = false
      this.koucaishow = false
      this.xinshangshow = false
      this.huajushow = true
      this.baoheshow = false
    },
    bhshow: function () {
      this.gushishow = false
      this.koucaishow = false
      this.xinshangshow = false
      this.huajushow = false
      this.baoheshow = true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*@font-face {
    font-family: 'katong';
    src:url(../../../assets/katong.TTF) format('truetype');
}
p{
  font-family:"katong";
}*/
.bg{
  background:url(../../../assets/read/1.0/2-assets/2.jpg);
  background-size:100%;
  height:720px;
  width:1280px;
  position: relative;
  text-align: center;
  margin:0 auto;
}
a{
  text-decoration: none;
  color:white;
}
.btn_go{
  height:100%;
  width:100%;
  opacity: 0;
  cursor:pointer;
}
.content{
  background:url(../../../assets/read/1.0/2-assets/context.png) no-repeat;
  background-size:100%;
  height:45px;
  width:100px;
  position: absolute;
  left:20px;
  top:25px;
}
.title{
  height:90px;
  width:320px;
  position: absolute;
  left:490px;
  font-size: 40px;
  top:10px;
}
.titlecon{
  margin-top:15px;
  letter-spacing:5px;
  color:lightcoral;
}
.close{
  background:url(../../../assets/read/1.0/2-assets/close.png) no-repeat;
  background-size:100%;
  height:60px;
  width:60px;
  position: absolute;
  right:10px;
  top:20px;
}
.pro{
  width:260px;
  height:250px;
  font-size: 20px;
  text-align: left;
  position: absolute;
  top:120px;
}
.story{
  height:500px;
  width:260px;
  position: absolute;
  left:0px;
  top:115px;
  text-align: center;
  color:white;
  font-size: 38px;
}
.contenttitle{
  height:50px;
  width:260px;
  position: absolute;
  cursor: pointer;
}
.title1,.title2,.title3,.title4,.title5{
  letter-spacing:3px;
  position: absolute;
  overflow: hidden;
  left:65px;
  width:170px;
  height:26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title2{
  top:40px;
}
.title3{
  top:80px;
}
.title4{
  top:120px;
}
.title5{
  top:160px;
}
.gushiicon1{
  background:url(../../../assets/icon/icon1.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  position: absolute;
}
.gushiicon2{
  background:url(../../../assets/icon/icon2.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:40px;
  position: absolute;
}
.gushiicon3{
  background:url(../../../assets/icon/icon1.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:80px;
  position: absolute;
}
.gushiicon4{
  background:url(../../../assets/icon/icon2.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:0px;
  top:120px;
  margin-left:30px;
  position: absolute;
}
.koucai{
  height:100px;
  width:260px;
  position: absolute;
  left:270px;
  top:115px;
  text-align: center;
  color:white;
  font-size: 38px;
}
.koucaiicon1{
  background:url(../../../assets/icon/chun.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  position: absolute;
}
.koucaiicon2{
  background:url(../../../assets/icon/chun.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:40px;
  position: absolute;
}
.koucaiicon3{
  background:url(../../../assets/icon/paper.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:80px;
  position: absolute;
}
.koucaiicon4{
  background:url(../../../assets/icon/paper.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:120px;
  position: absolute;
}
.xinshang{
  height:100px;
  width:260px;
  position: absolute;
  left:520px;
  top:115px;
  text-align: center;
  color:white;
  font-size: 38px;
}
.xinshangicon1{
  background:url(../../../assets/icon/form.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  position: absolute;
}
.xinshangicon2{
  background:url(../../../assets/icon/earphone.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:40px;
  position: absolute;
}
.xinshangicon3{
  background:url(../../../assets/icon/earphone.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:80px;
  position: absolute;
}
.huaju{
  height:100px;
  width:260px;
  position: absolute;
  right:250px;
  top:115px;
  text-align: center;
  color:white;
  font-size: 38px;
}
.huajuicon1{
  background:url(../../../assets/icon/picture.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  position: absolute;
}
.huajuicon2{
  background:url(../../../assets/icon/picture.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:40px;
  position: absolute;
}
.huajuicon3{
  background:url(../../../assets/icon/book.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:80px;
  position: absolute;
}
.baohe{
  height:100px;
  width:260px;
  position: absolute;
  right:0px;
  top:115px;
  text-align: center;
  color:white;
  font-size: 38px;
}
.baoheicon1{
  background:url(../../../assets/icon/feng.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  position: absolute;
}
.baoheicon2{
  background:url(../../../assets/icon/feng.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:40px;
  position: absolute;
}
.baoheicon3{
  background:url(../../../assets/icon/chun.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:80px;
  position: absolute;
}
.baoheicon4{
  background:url(../../../assets/icon/paper.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:120px;
  position: absolute;
}
.baoheicon5{
  background:url(../../../assets/icon/book.png) no-repeat;
  background-size:100%;
  width:30px;
  height:26px;
  left:30px;
  top:160px;
  position: absolute;
}
</style>
